<!--
 * @Author: 王耀泽
 * @Date: 2025-07-29 16:47:40
 * @LastEditTime: 2025-07-30 14:15:13
 * @LastEditors: aigis
 * @Description: 15201563666
 * @FilePath: \vue3-cesium\src\components\header\header.vue
 * 先看《地理信息导论第七版》
-->
<template>
  <div class="header">
    <div class="header-content">
      <div class="header-content-left">
        <div class="header-content-left-top">
          <HeaderLeft :active-index="leftActiveIndex" @update-active="handleUpdateActive" />
        </div>
      </div>
      <div class="header-content-center">
        <div class="header-content-center-text"> HSH医学救援数据库及决策支持系统</div>
      </div>
      <div class="header-content-right">
        <div class="header-content-right-top">
          <HeaderRight :active-index="rightActiveIndex" @update-active="handleUpdateActive" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import HeaderLeft from './HeaderLeft/HeaderSection.vue'
import HeaderRight from './HeaderRight/HeaderSection.vue'
import { leftRouter, rightRouter } from './config/navConfig'
import { useRouter } from 'vue-router'
export default {
  components: {
    HeaderLeft,
    HeaderRight
  },
  setup() {
    const router = useRouter()
    return { router }
  },
  props: {},
  data() {
    return {
      leftActiveIndex: -1,  // 左侧激活按钮索引
      rightActiveIndex: -1  // 右侧激活按钮索引
    };
  },
  watch: {},
  computed: {},
  methods: {

    /**
        * 处理子组件更新激活状态的事件
        * @param {number} index - 激活按钮的索引
        * @param {string} side - 哪一侧的按钮 (left 或 right)
        */
    handleUpdateActive(index, side) {
      if (side === 'left') {
        this.leftActiveIndex = index
        this.rightActiveIndex = -1
      } else if (side === 'right') {
        this.rightActiveIndex = index
        this.leftActiveIndex = -1
      }
    },
    /**
     * 根据当前路由设置激活状态
     */
    setActiveByRoute() {
      const currentPath = this.router.currentRoute.value.path

      // 查找左侧导航中是否有匹配的路径
      const leftActiveItem = leftRouter.find(item => item.path === currentPath)
      if (leftActiveItem) {
        this.leftActiveIndex = leftRouter.indexOf(leftActiveItem)
        this.rightActiveIndex = -1
        return
      }

      // 查找右侧导航中是否有匹配的路径
      const rightActiveItem = rightRouter.find(item => item.path === currentPath)
      if (rightActiveItem) {
        this.rightActiveIndex = rightRouter.indexOf(rightActiveItem)
        this.leftActiveIndex = -1
        return
      }

      // 如果都没有匹配的路径，则清除激活状态
      this.leftActiveIndex = -1
      this.rightActiveIndex = -1
    }






  },
  created() {

  },
  mounted() {
    // 初始化时根据当前路由设置激活状态
    this.setActiveByRoute()
  },
  watch: {
    // 监听路由变化，更新激活状态
    '$route'(to) {
      this.setActiveByRoute()
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 100px;
  background-image: url('@/assets/img/img_header/header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 10;

  .header-content {
    width: 100%;
    height: 100px;
    display: flex;
    /* 启用 Flex 布局 */
    justify-content: space-between;
    /* 三个子元素平均分布，两端对齐 */
    align-items: center;
    /* 垂直居中（可选，根据需求调整） */
  }

  .header-content-left {
    width: 710px;
    height: 100%;
    position: relative;

    /* 可添加左侧内容样式 */
    .header-content-left-top {
      width: 100%;
      height: 37%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .header-content-left-bottom {
      width: 100%;
      height: 50%;
    }
  }

  .header-content-center {
    width: 480px;
    height: 100%;

    .header-content-center-text {
      margin-top: 20px;
      height: 30px;
      font-family: PangMenZhengDao;
      font-size: 28px;
      font-weight: bold;
      // color: #DDFBFD;
      line-height: 30px;
      letter-spacing: 1px;
      text-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
      /* 调整阴影参数 */
      text-align: center;
      background: linear-gradient(to bottom, #E1FFFF 0%, #70B9CD 100%);
      /* 渐变背景 */
      -webkit-background-clip: text;
      /* 将背景裁剪到文字 */
      background-clip: text;
      -webkit-text-fill-color: transparent;
      /* 文字填充色透明，显示背景渐变 */
      color: transparent;
      /* 兼容性设置 */
    }
  }

  .header-content-right {
    width: 710px;
    height: 100%;

    .header-content-right-top {
      width: 100%;
      height: 37%;
    }

    .header-content-right-bottom {
      width: 100%;
      height: 50%;
    }
  }
}
</style>